<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>用户注册</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="css/bootstrap.min.css" />
	</head>

	<body>
		<div class="container" style="padding-top: 100px;" >

			<div class="starter-template">
				<h2 style="text-align: center;color: #7266ba;">用户注册</h2>
				<form>
					<div class="form-group">
						<label for="exampleInputEmail1">手机号</label>
						<input type="text" class="form-control" id="telphone" placeholder="手机号">
					</div>
					<div class="form-group">
						<button type="button" id="getotp" class="btn btn-info">发送手机验证码</button>
					</div>
					<div class="form-group">
						<label for="exampleInputPassword1">验证码</label>
						<input type="text" class="form-control" id="code" placeholder="验证码">
					</div>
					<div class="form-group">
						<label for="exampleInputPassword1">用户昵称</label>
						<input type="text" class="form-control" id="name" placeholder="用户昵称">
					</div>
					<div class="form-group">
						<label for="exampleInputPassword1">性别</label>
						<input type="text" class="form-control" id="gender" placeholder="性别">
					</div>
					<div class="form-group">
						<label for="exampleInputPassword1">年龄</label>
						<input type="text" class="form-control" id="age" placeholder="年龄">
					</div>
					<div class="form-group">
						<label for="exampleInputPassword1">密码</label>
						<input type="password" class="form-control" id="password" placeholder="密码">
					</div>
					<button id="register" type="button" class="btn btn-success">立即注册</button>
					<button id="login" type="button" class="btn btn-primary">有帐号，去登录</button>
				</form>
			</div>

		</div>

		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript">
			//发送验证码
			/*function getOtp(){
				var tel = $("#telphone").val();
				$.ajax({
					type:"get",
					url:"http://127.0.0.1:8090/user/getOtp?",
					data:"telphone="+tel,
					async:true,
					success:function(msg){
						console.log("%c 收到验证码："+msg.data,"color:#7266ba;font-size:4em;");
					}
				});
				
			}*/
			
			$(document).ready(function(){
				//发送验证码
				$("#getotp").on("click",function(){
					var tel = $("#telphone").val();
					if(tel == null || tel ==""){
						alert("手机号不能空");
						return false;
					}
					$.ajax({
						type:"post",
						url:"http://127.0.0.1:8090/user/getOtp?",
						data:"telphone="+tel,
						async:true,
						xhrFields:{withCredentials:true},
						success:function(msg){
						console.log("%c 收到验证码："+msg.data,"color:#7266ba;font-size:4em;");
						if(msg.status=="success"){
							alert("短信已经发送成功，请注意查收");
						}else{
							alert("短信已经发送失败，原因为"+msg.data.Msg);
						}
						},
						error:function(err){
							console.log(err.responseText);
						}
					});
				});
				$("#login").on("click",function(){
					window.location.href="login.html";
				});
				
				$("#register").on("click",function(){
					var tel = $("#telphone").val();
					var code = $("#code").val();
					var name = $("#name").val();
					var gender = $("#gender").val();
					var age = $("#age").val();
					var password = $("#password").val();
					if(tel == null || tel ==""){
						alert("手机号不能空");
						return false;
					}
					if(code == null || code ==""){
						alert("验证码不能空");
						return false;
					}
					if(name == null || name ==""){
						alert("昵称不能空");
						return false;
					}
					if(age == null || age ==""){
						alert("年龄不能空");
						return false;
					}
					if(gender == null || gender ==""){
						alert("性别不能空");
						return false;
					}
					if(password == null || password ==""){
						alert("密码不能空");
						return false;
					}
					$.ajax({
						type:"post",
						url:"http://127.0.0.1:8090/user/register",
						data:{
							"telphone":tel,
							"name":name,
							"age":age,
							"gender":gender,
							"password":password,
							"code":code
						},
						async:true,
						xhrFields:{withCredentials:true},
						success:function(msg){
						//console.log("%c 收到验证码："+msg.data,"color:#7266ba;font-size:4em;");
						if(msg.status=="success"){
							alert("注册成功");
						}else{
							alert("注册失败，原因为"+msg.data.Msg);
						}
						},
						error:function(err){
							console.log(err.responseText);
						}
					});
				})
			});
		</script>
	</body>

</html>